<template>
    <div>
        <div class="index">
            <div class="w1">
                <div class="w1_1">
                    <p>编辑资料</p>
                </div>
            </div>
            <div class="w2">
                <div class="w2_1">
                    <img class="img1" :src="img || 'https://img-static.mihoyo.com/avatar/avatar10013.png'" alt="" @click="Statusoh = true">
                    <p @click="Statusoh = true">修改头像</p>
                </div>
                <div class="w2_2">
                    <p>昵称</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <p>憨憨还无语</p>
                </div>
                <div class="w2_3">
                    <p>性别</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="it.name" value="1"><label>男</label>&nbsp;&nbsp;
                    <input type="radio" name="it.name" value="2"><label>女</label>&nbsp;&nbsp;
                    <input type="radio" name="it.name" value="3" checked><label>保密</label>
                </div>
                <div class="w2_4">
                    <p>个性签名</p>&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-input class="w2_4_1" type="textarea" placeholder="系统原装签名，送给每一位小可爱~" v-model="textarea" maxlength="48" show-word-limit></el-input>
                </div>
                <div class="w2_5">
                    <p>保存</p>
                </div>
            </div>
        </div>
        <!-- 修改头像框 -->
        <div class="index3" v-show="Statusoh">
            <ModifAvatar :Negativeone="focus" @Statusoh="Statusoh2" @imgStatusoh="imgStatusoh2"></ModifAvatar>
        </div>
    </div>
</template>

<script>
import ModifAvatar from '../PersonalCenter/ModifyAvatar.vue'
export default {
    components: {ModifAvatar},
    data () {
        return {
            focus: -1,
            Statusoh: false,
            img: '',
            textarea: '',
            the_data1: ['222']
        }
    },
    mounted() {
        
    },
    updated() {
        this.$emit('imgla', this.img)
    },
    methods: {
        Statusoh2(i) {
            this.Statusoh = i
        },
        imgStatusoh2(i,fa) {
            this.img = i
            this.Statusoh = fa
        }
    }
}
</script>

<style lang="less" scoped>
    a {
        color: #999;
        text-decoration: none;
    }
    .index3 {
        position: fixed;
        top: 20%;
        left: 35%;
        border-radius: 6px;
    }
    .index {
        // border: 1px solid red;
        .w1 {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            .w1_1 {
                margin-left: 20px;
            }
        }
        .w2 {
            padding: 20px;
            .w2_1 {
                // border: 1px solid red;
                text-align: center;
                padding: 30px;
                .img1 {
                    max-width: 13%;
                    border-radius: 50%;
                    cursor: pointer;
                }
                p {
                    color: #00c3ff;
                    font-size: 13px;
                    cursor: pointer;
                }
            }
            .w2_2 {
                // border: 1px solid red;
                margin-top: 10px;
                display: flex;
                align-items: center;
                p:nth-last-child(2) {
                    font-size: 14px;
                    color: #999;
                }
                p:nth-last-child(1) {
                    font-size: 14px;
                }
            }
            .w2_3 {
                // border: 1px solid red;
                margin-top: 10px;
                display: flex;
                align-items: center;
                p {
                    font-size: 14px;
                    color: #999;
                }
                label {
                    font-size: 14px;
                }
            }
            .w2_4 {
                // border: 1px solid red;
                margin-top: 10px;
                display: flex;
                align-items: center;
                p {
                    font-size: 14px;
                    color: #999;
                    // border: 1px solid red;
                    margin-top: -6px;
                }
                .w2_4_1 {
                    width: 600px;
                    // margin-top: 5px;
                }
            }
            .w2_5 {
                display: flex;
                justify-content: center;
                padding-bottom: 20px;
                p {
                    border: 1px solid #00c3ff;
                    width: 80px;
                    color: #00c3ff;
                    border-radius: 5px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }
</style>